<template>
  <div>
    <div class="userHead" id="userHead" style="width: 1000px; ">
      <div id="titlepage">
        <img src="../assets/images/login_bg2.jpg" id="tp_image" alt />
        <input type="file" name multiple onchange="showFileInfo2(this)" />
        
      </div>
      <div id="icon">
        <img :src="`http://localhost:3000/upload/${contentas.headImg}`" id="icon_image" alt />
        <input type="file" name multiple onchange="showFileInfo(this)" />
        <div id="icon_change">
          <svg
            t="1597738484243"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4307"
            width="100"
            height="100"
          >
            <path
              d="M269.44 256l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333z m23.605333 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v426.666667a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V373.333333a53.333333 53.333333 0 0 0-53.333334-53.333333h-90.378666a32 32 0 0 1-30.570667-22.549333l-30.272-97.930667a10.666667 10.666667 0 0 0-10.186667-7.52H364.074667a10.666667 10.666667 0 0 0-10.186667 7.52l-30.272 97.92A32 32 0 0 1 293.045333 320zM512 725.333333c-88.362667 0-160-71.637333-160-160 0-88.362667 71.637333-160 160-160 88.362667 0 160 71.637333 160 160 0 88.362667-71.637333 160-160 160z m0-64a96 96 0 1 0 0-192 96 96 0 0 0 0 192z"
              p-id="4308"
              fill="#eeeeee"
            />
          </svg>
        </div>
      </div>
      <div id="information">
        <h1 id="nickName">{{contentas.nickName}}</h1>
        <span></span>
        <div class="collapse-wrap" v-show="isActive">
          <!-- @slot default -->
          <slot></slot>
          <div id="info2">
            <ul id="info2_ul">
              <li>
                <a>性别</a>
                <span id="sex">
                  <svg
                    t="1599733816273"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1888"
                    width="30"
                    height="30"
                  >
                    <path
                      d="M298.24 759.594667a225.877333 225.877333 0 1 1 319.488-319.445334 225.877333 225.877333 0 0 1-319.445333 319.445334z m30.208-30.165334A183.210667 183.210667 0 1 0 587.52 470.314667a183.210667 183.210667 0 0 0-259.114667 259.114666z"
                      fill="#55585f"
                      p-id="1889"
                    />
                    <path
                      d="M602.624 455.253333a21.333333 21.333333 0 0 1-2.474667-27.221333l2.474667-2.986667 93.184-93.141333a21.333333 21.333333 0 0 1 32.64 27.221333l-2.474667 2.986667-93.184 93.141333a21.333333 21.333333 0 0 1-30.165333 0z"
                      fill="#55585f"
                      p-id="1890"
                    />
                    <path
                      d="M567.68 317.184l0.554667-3.84a21.333333 21.333333 0 0 1 21.845333-16.384l3.84 0.554667 134.698667 31.744 31.744 134.698666a21.333333 21.333333 0 0 1-40.32 13.44l-1.194667-3.626666-25.728-109.056-109.013333-25.685334a21.333333 21.333333 0 0 1-16.256-18.090666l-0.170667-3.754667z"
                      fill="#55585f"
                      p-id="1891"
                    />
                  </svg>
                </span>
              </li>
              <li>
                <a>职业</a>
                <span id="occupy">{{contentas.occupation}}</span>
              </li>
              <li>
                <a>个人简介</a>
                <span>{{contentas.Signature}}</span>
              </li>
            </ul>
          </div>
        </div>

        <p v-if="!isActive" @click="isActive=!isActive">
          <svg
            class="more"
            t="1597737142479"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2672"
            width="15"
            height="15"
          >
            <path
              d="M512 685.248l-278.624-278.624 45.248-45.248L512 594.752l233.376-233.376 45.248 45.248z"
              fill="#aaaaaa"
              p-id="2673"
            />
          </svg>查看更多个人信息
        </p>
        <p @click="isActive=!isActive" v-if="isActive" class="up">
          <svg
            id="svg"
            t="1599728101182"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2611"
            width="15"
            height="15"
          >
            <path
              d="M745.376 662.624L512 429.248l-233.376 233.376-45.248-45.248L512 338.752l278.624 278.624z"
              fill="#aaaaaa"
              p-id="2612"
            />
          </svg>收起
        </p>
        <div id="msg_btn">
          <svg
            t="1599740996276"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7433"
            width="18"
            height="18"
          >
            <path
              d="M887.296 134.144H136.704c-47.104 0-85.504 38.4-85.504 85.504v585.216c0 47.104 38.4 85.504 85.504 85.504h750.592c47.104 0 85.504-38.4 85.504-85.504V219.648c0-47.616-38.4-85.504-85.504-85.504z m12.8 235.52c0 4.096-2.048 7.68-5.632 9.728L517.12 572.928c-3.072 1.536-6.656 1.536-9.728 0L129.536 379.392c-3.584-2.048-5.632-5.632-5.632-9.728v-36.352c0-7.68 7.68-12.8 14.848-9.728l369.152 155.648c2.56 1.024 5.632 1.024 8.192 0l369.152-155.648c7.168-3.072 14.848 2.048 14.848 9.728v36.352z"
              p-id="7434"
              fill="#aaaaaa"
            />
          </svg>
          发私信
        </div>
        <div id="follow_btn" v-if="!followflag" @click="guanzhu()">
          <svg
            t="1599740553681"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1045"
            width="18"
            height="18"
          >
            <path
              d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
              p-id="1046"
              fill="#ffffff"
            />
          </svg>
          关注
        </div>
        <div id="follow_btn" v-if='followflag' @click="guanzhu()">
          已关注
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import showInfo from "@/router/showInfo.js";

export default {
  data() {
    return {
      isActive: true,
      ouids:'',
      ownuids:'',
      contentas:'',
      followflag:true
    };
  },
  created(){
    this.ownuids=this.$store.state.ownUid
    if(this.$route.query.uid){
      this.ouids=this.$route.query.uid
      localStorage.setItem('ouids',this.ouids)
    }
    else{
      this.ouids=localStorage["ouids"]
    }
    this.$store.state.oUid=this.ouids
    this.$axios.get('/api/personal/getInfos',{params:{uId:this.ouids}})
                .then(res=>{
                    this.contentas=res.data.data[0]
                    // console.log(this.contentas)
                })
                .catch(err=>{
                    console.log('err:',err)
                })
    this.$axios.get('/api/users/follow1',{params:{ouid:this.ouids,ownuid:this.ownuids}})
                .then(res=>{
                  console.log(res)
                    if(res.data.data.length){
                        this.followflag=true
                    }
                    else{
                        this.followflag=false
                    }
                })
                .catch(err=>{
                    console.log('err:',err)
                })
  },
  methods:{
     follow(){
       
     },
     guanzhu(){
          this.followflag=!this.followflag
          if(this.followflag){
            this.$axios.get('/api/users/follow3',{params:{ouid:this.ouids,ownuid:this.ownuids}})
                            .then(res=>{
                                this.$message({
                                    message: '关注成功',
                                    type: 'success'
                                });
                            })
                            .catch(err=>{
                                console.log('err:',err)
                            })
          }
          else{
            this.$axios.get('/api/users/follow2',{params:{ouid:this.ouids,ownuid:this.ownuids}})
                            .then(res=>{
                            this.$message({
                                message: '取消关注',
                                type: 'success'
                            });
                            })
                            .catch(err=>{
                                console.log('err:',err)
                            })
          }
     }
   }
};
</script>
<style>
#userHead #follow_btn {
  font-size: 14px;
  width: 92px;
  height: 37px;
  border-radius: 5px;
  background-color: rgb(89, 81, 165);
  color: #fff;
  text-align: center;
  line-height: 35px;
  float: right;
  position: relative;
  top: -50px;
  margin-right: 10px;
}

#userHead #msg_btn {
  font-size: 14px;
  width: 90px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid #aaa;
  color: #aaa;
  text-align: center;
  line-height: 35px;
  float: right;
  position: relative;
  top: -50px;
}
#userHead #sex svg{
  margin-top: -15px;
}
#userHead #follow_btn svg,
#userHead #msg_btn svg {
  position: relative;
  top:-2px
  /* top: 4px; */
}
#userHead #achievement a {
  display: inline-block;
  width: 320px;
  margin: 15px 5px;
  height: 40px;
  border-bottom: 1px solid #eee;
  padding-left: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.userHead {
  background-color: #fff;
  box-shadow: 0 0 5px 2px rgb(204, 217, 235);
  position: relative;
}
#userHead .up {
  position: relative;
  left: 180px;
}
#userHead #titlepage {
  width: 996px;
  height: 240px;
  /* background-image: url(images/login_bg2.jpg); */
  /* background-size: cover; */
  opacity: 0.9;
  position: relative;
  left: 2px;
  top: 0;
  overflow: hidden;
}

#tp_image {
  width: 996px;
  position: relative;
}

.tp_changebtn {
  width: 130px;
  height: 30px;
  border: 1px solid rgb(204, 217, 235);
  border-radius: 10px;
  color: rgb(226, 228, 255);
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  right: 5px;
  top: 5px;
  /* margin: 5px; */
  opacity: 0.5;
  z-index: 10;
}

.tp_changebtn svg {
  position: relative;
  top: 3px;
  margin-right: 2px;
}

.tp_changebtn:hover {
  opacity: 0.9;
  cursor: pointer;
}

#userHead #icon {
  /* clear: both; */
  width: 180px;
  height: 180px;
  /* background-image: url(images/logo.jpg); */
  background-size: cover;
  opacity: 1;
  float: left;
  position: relative;
  left: 30px;
  top: -60px;
  border-radius: 10px;
  z-index: 1;
  box-shadow: 2px 2px 3px rgb(60, 193, 255), -2px -2px 3px rgb(60, 193, 255);
}

#icon_image {
  width: 180px;
  height: 180px;
  border-radius: 10px;
  position: absolute;
}

#icon_change {
  width: 180px;
  height: 180px;
  background-color: #000;
  float: left;
  border-radius: 10px;
  display: none;
  text-align: center;
  opacity: 0.5;
}

#icon:hover {
  cursor: pointer;
}

#icon_change svg {
  position: relative;
  top: 30px;
}

.head input {
  display: none;
}
#information {
  width: 830px;
  position: relative;
  /* top: 240px; */
  left: 70px;
  padding: 5px;
  display: block;
}
#info1 {
  display: block;
}
#svg {
  position: relative;
  top: -2px;
  left: -3px;
}

#information h1 {
  font-size: 28px;
  margin: 5px 5px;
}

#userHead #information span {
  font-size: 16px;
  margin: 5px 6px;
  color: #444;
}

#information p {
  font-size: 13px;
  margin: 25px 5px;
  color: #aaa;
}

#information p:hover {
  cursor: pointer;
}

#information span .change,
.more {
  position: relative;
  top: 0px;
  margin-right: 5px;
}

#sex {
  position: relative;
  top: 5px;
}
</style>